<!DOCTYPE html>
<#assign ctx=request.contextPath>
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    </head>
    <!-- moo.fx折叠菜单库 -->
    <script src="${ctx}/js/menu/prototype.lite.js" type="text/javascript"></script>
    <script src="${ctx}/js/menu/moo.fx.js" type="text/javascript"></script>
    <script src="${ctx}/js/menu/moo.fx.pack.js" type="text/javascript"></script>
    <style>
        body {
            font:12px Arial, Helvetica, sans-serif;
            color: #000;
            background-color: #EEF2FB;
            margin: 0px;
        }
        #container {
            width: 182px;
        }
        H1 {
            font-size: 12px;
            margin: 0px;
            width: 182px;
            cursor: pointer;
            height: 30px;
            line-height: 20px;	
        }
        H1 a {
            display: block;
            width: 182px;
            color: #000;
            height: 30px;
            text-decoration: none;
            moz-outline-style: none;
            background-image: url("${ctx}/images/menu/menu_bgs.gif");
            background-repeat: no-repeat;
            line-height: 30px;
            text-align: center;
            margin: 0px;
            padding: 0px;
        }
        .content{
            width: 182px;
            height: 26px;

        }
        .MM ul {
            list-style-type: none;
            margin: 0px;
            padding: 0px;
            display: block;
        }
        .MM li {
            font-family: Arial, Helvetica, sans-serif;
            font-size: 12px;
            line-height: 26px;
            color: #333333;
            list-style-type: none;
            display: block;
            text-decoration: none;
            height: 26px;
            width: 182px;
            padding-left: 0px;
        }
        .MM {
            width: 182px;
            margin: 0px;
            padding: 0px;
            left: 0px;
            top: 0px;
            right: 0px;
            bottom: 0px;
            clip: rect(0px,0px,0px,0px);
        }
        .MM a:link {
            font-family: Arial, Helvetica, sans-serif;
            font-size: 12px;
            line-height: 26px;
            color: #333333;
            background-image: url("${ctx}/images/menu/menu_bg1.gif");
            background-repeat: no-repeat;
            height: 26px;
            width: 182px;
            display: block;
            text-align: center;
            margin: 0px;
            padding: 0px;
            overflow: hidden;
            text-decoration: none;
        }
        .MM a:visited {
            font-family: Arial, Helvetica, sans-serif;
            font-size: 12px;
            line-height: 26px;
            color: #333333;
            background-image: url("${ctx}/images/menu/menu_bg1.gif");
            background-repeat: no-repeat;
            display: block;
            text-align: center;
            margin: 0px;
            padding: 0px;
            height: 26px;
            width: 182px;
            text-decoration: none;
        }
        .MM a:active {
            font-family: Arial, Helvetica, sans-serif;
            font-size: 12px;
            line-height: 26px;
            color: #333333;
            background-image: url("${ctx}/images/menu/menu_bg1.gif");
            background-repeat: no-repeat;
            height: 26px;
            width: 182px;
            display: block;
            text-align: center;
            margin: 0px;
            padding: 0px;
            overflow: hidden;
            text-decoration: none;
        }
        .MM a:hover {
            font-family: Arial, Helvetica, sans-serif;
            font-size: 12px;
            line-height: 26px;
            font-weight: bold;
            color: #006600;
            background-image: url("${ctx}/images/menu/menu_bg2.gif");
            background-repeat: no-repeat;
            text-align: center;
            display: block;
            margin: 0px;
            padding: 0px;
            height: 26px;
            width: 182px;
            text-decoration: none;
        }
    </style>
</head>

<body>
    <table width="100%" height="280" border="0" cellpadding="0" cellspacing="0" bgcolor="#EEF2FB">
        <tr>
            <td width="182" valign="top">
                <div id="container">
                
                    
                    <h1 class="type"><a href="${ctx}/" target="main">菜单名称</a></h1>
                        <div class="content">
                            <table width="100%" border="0" cellspacing="0" cellpadding="0">
                                <tr>
                                    <td><img src="${ctx}/images/menu/menu_topline.gif" width="182" height="5" /></td>
                                </tr>
                            </table>
                            <ul class="MM">
                                <li><a href="${ctx}/" target="main">菜单名称</a></li>
                            </ul>
                        </div>
                     	
                      <h1 class="type"><a href="${ctx}/">菜单名称</a></h1>

                </div>

                <script type="text/javascript">
                	//定义contents 组数为所有将要显示的内容
                    var contents = document.getElementsByClassName('content');
                    //定义contents 组数为所有标题，也是可点击展开的按钮
                    var toggles = document.getElementsByClassName('type');
                    //调用moofx JS库
                    //opacity确定是否有alpha透明变化,duration确定动作所有时间
                    var myAccordion = new fx.Accordion(toggles, contents, {opacity: true, duration: 400});
                    //默认打开第一个内容
                    myAccordion.showThisHideOpen(contents[0]);
                </script>
            </td>
        </tr>
    </table>
</body>
</html>
